.f {
  position: relative;
  margin: 300px;
}
.f .s {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-origin: -100% center;
  border-radius: 100%;
  background-color: #f00;
}
.f .s:nth-child(1) {
  transform: translate(100px) rotate(30deg);
}
.f .s:nth-child(2) {
  transform: translate(100px) rotate(60deg);
}
.f .s:nth-child(3) {
  transform: translate(100px) rotate(90deg);
}
.f .s:nth-child(4) {
  transform: translate(100px) rotate(120deg);
}
.f .s:nth-child(5) {
  transform: translate(100px) rotate(150deg);
}
.f .s:nth-child(6) {
  transform: translate(100px) rotate(180deg);
}
.f .s:nth-child(7) {
  transform: translate(100px) rotate(210deg);
}
.f .s:nth-child(8) {
  transform: translate(100px) rotate(240deg);
}
.f .s:nth-child(9) {
  transform: translate(100px) rotate(270deg);
}
.f .s:nth-child(10) {
  transform: translate(100px) rotate(300deg);
}
.f .s:nth-child(11) {
  transform: translate(100px) rotate(330deg);
}
.f .s:nth-child(12) {
  transform: translate(100px) rotate(360deg);
}/*# sourceMappingURL=30_20220228215803.css.map */